<script setup lang="ts">
import { requiredCheck, singleIpCheck, singleIpCheckFun, validDomian } from "@/utils/verify";
import { ref } from "vue";
import { addData, editData } from "@/api/modules/dynamic-camouflage/disguised-domain";

interface Props {
  title?: string;
  rowData?: Object;
}

const props = withDefaults(defineProps<Props>(), {
  title: "新增虚拟域名",
  rowData: undefined
});
defineOptions({
  name: "UpdateForm" // 默认策略
});
import useUpdate from "@/hooks/useUpdate";
import { ifaceAll, ifacemodeUpdate } from "@/api/modules/dynamic-camouflage/line-config";
import SelectLinksInput from "@/components/SelectLinksInput/index.vue";
import { generateUUID } from "@/utils";

const emits = defineEmits(["success"]);
const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({
  rules: {
    name: [...requiredCheck("请选择线路")],
    hosts: [...requiredCheck("请输入虚拟域名"), { validator: validDomian }],
    ips: [...requiredCheck("请输入指向IP"), { validator: singleIpCheck }],
    interval: [
      {
        validator: (rule, value, callback) => {
          if (!updateFormData.intervalState) {
            callback();
          } else {
            if (!value) {
              callback("变换频率不能为空");
            }else{
              callback();
            }
          }
        }
      }
    ]
  },
  defaultData: {
    intervalState: 0,
    interval: 5,
    ips: [
      {
        ip: "",
        id: generateUUID()
      }
    ]
  }
});

async function submitCb() {
  try {
    const sendData = {
      hosts: updateFormData.hosts,
      ip: updateFormData.ips.map(item => item.ip).join(";"),
      name: updateFormData?.name,
      interval: updateFormData?.intervalState == 0 ? 0 : updateFormData?.interval,
    };
    console.log("sendData", sendData);
    if (updateFormData?.id) {
      sendData.id = updateFormData.id;
    }
    await submit({
      addApi: addData,
      updateApi: editData,
      sendData: sendData
    });
    emits("success");
  } catch (e) {
    console.log(e);
  }
}

function ipsPlus() {
  updateFormData.ips.push({
    id: generateUUID(),
    ip: ""
  });
}

function ipsReduce(index) {
  updateFormData.ips.splice(index, 1);
}

function openHandleCb() {
  openHandle({
    row: {
      ...props.rowData
    },
    id: props.rowData?.id
  });
  if (props.rowData?.ip) {
    updateFormData.ips = props.rowData?.ip.split(";").map(item => {
      return {
        id: generateUUID(),
        ip: item
      };
    });
    updateFormData.intervalState = Number(Boolean(Number(updateFormData.interval)));
  }
}
</script>

<template>
  <div class="update-form mg-r-sm update-form-edit" style="display: inline-block; height: 55px" @click="openHandleCb">
    <slot>
      <el-button type="primary">新增</el-button>
    </slot>
  </div>
  <base-dialog @confirm="submitCb()" width="500px" :title="title" v-model="showHandle">
    <div class="details">
      <div class="details-main">
        <el-form ref="updateFormRef" :model="updateFormData" :rules="updateFormRules" label-width="120px" label-suffix="：">
          <el-form-item label="线路" prop="name">
            <SelectLinksInput isName placeholder="请选择线路" v-model="updateFormData.name" />
          </el-form-item>
          <el-form-item label="虚拟域名" prop="hosts">
            <el-input style="width: 240px" v-model="updateFormData.hosts" auto-complete="off" placeholder="请输入虚拟域名" />
          </el-form-item>
          <div style="max-height: 400px; overflow-y: scroll">
            <el-form-item
              v-for="(item, index) in updateFormData.ips"
              :key="item.id"
              class="mg-b-sm"
              :label="index == 0 ? '指向IP' : ''"
              :prop="'ips.' + index + '.ip'"
              :rules="updateFormRules.ips"
            >
              <el-input style="width: 240px" v-model="item.ip" auto-complete="off" placeholder="请输入" />
              <base-button @click="ipsPlus" type="insert_icon" class="mg-l-sm"></base-button>
              <base-button v-if="updateFormData.ips?.length > 1" @click="ipsReduce(index)" type="close_icon"></base-button>
            </el-form-item>
          </div>
          <el-form-item label="变换频率" prop="interval">
            <el-radio-group v-model="updateFormData.intervalState">
              <el-radio :value="0">关闭</el-radio>
              <el-radio :value="1">开启</el-radio>
            </el-radio-group>
            <div v-if="updateFormData.intervalState == 1">
              <el-input v-model="updateFormData.interval" type="number" style="width: 80px"></el-input>
              分钟
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer-more-button></template>
  </base-dialog>
</template>

<style lang="scss" scoped></style>
